Purge CSS
使用されていないCSSを取り除くツール
以下のいずれかの方法を使える
CLI
JavaScript API
Webpack
Gulp
Rollup
React
Next
Vue
Nuxt
WordPress
Vue + Webpackで実際に試してみる
Pug+Stylusの構成だったが、特に設定することもなく実行できた
結果
ファイルサイズは534KB→129KB。405KB、約75％の削減
実際の通信量は71KB→18KB。 53KB、約75%の削減
小さめのアプリでCSSフレームワークを使っている場合にはかなりの容量削減が期待できる
https://gyazo.com/b294a664b80ca810c97cbac6fd689d88 https://gyazo.com/e618f2b96b1d7558acd36de2c151d5e8
左 変更前： 右変更後
https://gyazo.com/ef787920ffe6d1cfaaf456b5a178a997 https://gyazo.com/510c3d16e678ae387593ee38fb108724
コード
基本は以下のガイドの通りwebpackの設定ファイルvue.config.jsを書き換える
ハマりどころ
TypeScriptを使っている場合はtsファイルを対象に含める
index.htmlの位置がvueのバージョンによって異なるのでちゃんと確認する
CSSフレームワークを使っている場合はそのファイルも指定する node_module/foo/bar
:class="" で動的にクラスを指定している場合
おそらく使っていないCSSと判断される（要確認）
Vue Cli3vuetifyTypeScriptを使っているため、以下のような設定にした
icon から始まるクラスは :class="" で動的に指定しているため、ホワイトリストに入れて削除されない設定
code:vue.config.js
new PurgecssPlugin({
paths: glob.sync([
path.join(__dirname, './public/index.html'),
path.join(__dirname, './src/**/*.vue'),
path.join(__dirname, './src/**/*.js'),
path.join(__dirname, './src/**/*.ts'),
path.join(__dirname, './node_modules/vuetify/dist/vuetify.js')
]),
})
参考